<template>
  <div>
    <!-- ---------------顶部横幅------------ -->
    <div class="topBanner">
      <router-link to="/home">
        <div @click="router.go(-1)" style="font-size: 16px; color: #333; width: 50px">
          <van-icon name="arrow-left" />{{ "返回" }}
        </div>
      </router-link>
      <router-link to="/search">
        <van-search placeholder="搜索" shape="round" />
      </router-link>
      <div class="openApp">打开APP</div>
    </div>
    <van-tabs @click-tab="logTab" color="#fe7e60">
      <van-tab title="全部"></van-tab>
      <van-tab v-for="index in categoryDetail" :title="index.name"></van-tab>
    </van-tabs>

    <van-tabs type="card" @click-tab="logTab2" color="#fe7e60">
      <van-tab title="综合排序"></van-tab>
      <van-tab title="最多播放"></van-tab>
      <van-tab title="最近更新"></van-tab>
    </van-tabs>
    <!-- 听单列表 -->
    <van-card
      v-for="item in categoryDetailList"
      :desc="item.intro"
      :title="item.albumTitle"
      :thumb="'https://imagev2.xmcdn.com/' + item.albumCoverPath"
    />
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, onMounted } from "vue";
import {
  reqCategoryDetail,
  reqCategoryDetailList,
  reqCategoryDetailList_init,
} from "../../api/tzl_category";
import { useRoute, useRouter } from "vue-router";

export default defineComponent({
  name: "categoryDetail",
});
</script>

<script setup lang="ts">
const categoryDetail = ref<any>([]);
const categoryDetailList = ref<any>([]); // 分类下的详情列表
const categoryActive = ref(2);
const sortActive = ref(1);
const categoryString = ref("");
const level = ref(2); // 表示现在处于的分类层级
const secondLevelId = ref(null); // 二级分类id
const index2 = ref(null);
const baseCategoryString = ref("");

const route = useRoute();
const router = useRouter();

onMounted(() => {
  // 获取路由参数中的categoryId
  console.log(route);
  categoryString.value = route.query.categoryString;
  index2.value = Number(route.query.index);

  // 存储二级分类id
  secondLevelId.value = route.query.secondLevelId;
  categoryActive.value = route.params.categoryId;
  getCategoryDetail();
  getCategoryDetailList();
});

// 封装获取分类详情信息的函数
const getCategoryDetail = async () => {
  console.log("level", level.value);

  const res = await reqCategoryDetail(categoryActive.value);
  categoryDetail.value = res.data.metadata[0].metadataValues;

  categoryDetail.value =
    categoryDetail.value[index2.value].metadataValues[0].metadataValues;

  level.value = level.value + 1;
};

// 封装获取分类下列表的函数
const getCategoryDetailList = async () => {
  console.log(categoryActive.value);

  // 收集数据
  // const params = {
  //   pageNum: 1,
  //   pageSize: 2,
  //   sort: sortActive.value,
  //   categoryId: categoryActive.value,
  // };

  if (level.value === 2) {
    console.log("二级列表");

    // 包含逗号
    if (categoryString.value.includes(",")) {
      level.value = level.value - 1;
      categoryString.value = categoryString.value.split(",")[1].trim();
      baseCategoryString.value = categoryString.value.split(",")[0].trim();
    }

    // 通过点击二级标题进入
    const res = await reqCategoryDetailList(
      1,
      8,
      sortActive.value,
      categoryActive.value,
      categoryString.value
    );

    console.log("reqCategoryDetailList", res);
    categoryDetailList.value = res.data.albums;
  } else if (level.value === 3) {
    console.log("三级列表");
    // categoryString.value = route.query.jilie + "," + categoryString.value;

    const res = await reqCategoryDetailList(
      1,
      8,
      sortActive.value,
      categoryActive.value,
      categoryString.value
    );
    console.log("categoryString", categoryString.value);

    console.log("reqCategoryDetailList", res);
    categoryDetailList.value = res.data.albums;
  } else {
    // 通过点击标题进入
    getCategoryDetailList_init();
  }
};

// 封装函数通过categoryId发送请求
const getCategoryDetailList_init = async () => {
  const res = await reqCategoryDetailList_init(
    1,
    8,
    sortActive.value,
    categoryActive.value
  );
  console.log("reqCategoryDetailList", res);
  categoryDetailList.value = res.data.albums;
};

// 修改categoryActive的状态
const logTab = (index: any) => {
  categoryDetail.value.forEach((item: any) => {
    console.log(index);
    if (index.title === "全部") {
      getCategoryDetailList_init();
    }

    // 寻找item项
    if (item.name === index.title) {
      categoryString.value = item.name;
      getCategoryDetailList();
      // 覆盖顶部分类

      if (level.value > 2) return;

      categoryDetail.value =
        categoryDetail.value[Number(index.name) - 1].metadataValues[0].metadataValues;
    }
  });
};

// 修改sortActive的状态
const logTab2 = (index: any) => {
  // console.log(index.name + 1);
  sortActive.value = index.name + 1;
  // console.log(sortActive.value);
  getCategoryDetailList();
};
</script>

<style scoped lang="less">
.topBanner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 5px 15px;
  padding-top: 15px;

  height: 50px;
  width: 100%;
  img {
    width: 70px;
    height: 19px;
  }
  .openApp {
    height: 29px;
    width: 88px;
    line-height: 29px;
    text-align: center;
    font-size: 12px;
    // background-color: #fa2800;
    border: 1px solid #fa2800;
    color: #fa2800;
    border-radius: 15px;
  }
}

.flex {
  display: flex;
}
.flexC {
  display: flex;
  flex-direction: column;
}

.list_pic {
  width: 70px;
  height: 70px;
}
.list_desc .list_title {
  font-size: 16px;
}
.list_intro {
  font-size: 13px;
}
</style>
